import { useT } from '@designable/event-system'
import React, { useEffect } from 'react'
import { Field } from '@formily/react'
import { FormItem, Cascader } from '@formily/antd'

function generateMonthDays() {
  const $t = useT()
  const fms_day = $t('日')
  const fms_month = $t('月')

  const months = []
  for (let month = 1; month <= 12; month++) {
    const daysInMonth = new Date(2023, month, 0).getDate() // 获取当前月份的天数，固定2023比较准确
    const days = []
    for (let day = 1; day <= daysInMonth; day++) {
      days.push({
        value: day < 10 ? `0${day}` : String(day),
        label: `${day}${fms_day}`,
      })
    }
    months.push({
      value: month < 10 ? `0${month}` : String(month),
      label: `${month}${fms_month}`,
      children: days,
    })
  }
  return months
}
export function FormMonthDayPicker(props: {
  value: string
  onChange?: (value: string) => void
}) {
  const monthDays = generateMonthDays()
  const value = props.value?.split('-')
  const onChange = (val: any) => {
    if (!val) return
    const [month, day] = val ? val : []
    props.onChange?.(`${month}-${day}`)
  }
  return <Cascader options={monthDays} onChange={onChange} value={value} />
}

// export const FormMonthDayPicker = (props: {
//   name: string
//   title: string
//   required?: boolean
// }) => {
//   return (
//     <Field
//       required={props.required}
//       title={props.title}
//       name={props.name}
//       decorator={[FormItem]}
//       component={[Com]}
//     />
//   )
// }
